<template>

	<view>
		<!-- <div class="drag">打开同学录</div> -->

		<div v-if='false'>
			<button class="cu-btn round bg-primary drag" style="background-color: #F06292;" type="primary" open-type="getUserInfo"
			 @getuserinfo="mpGetUserInfo">
				<text style="margin-left: 100rpx; margin-right: 100rpx;">授权</text>
			</button>
		</div>

		<view class=''>

			<form>
				<view class="flex cu-form-group margin-top justify-between ">
					<view class="title">姓名：</view>
					<input placeholder="你的名字" v-model="myName"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">破壳日：</view>
					<picker mode="date" :value="myBirthday" start="2015-09-01" end="2020-09-01" @change="DateChange">
						<view class="picker">
							{{myBirthday}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">梦想</view>
					<input placeholder="没有梦想,跟咸鱼有什么区别!" v-model="myDream"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">电话</view>
					<input type="number" placeholder="常联系" v-model="myPhone"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">对我的第一印象</view>
				</view>

				<view class='padding-sm flex flex-wrap'>
					<view class="padding-xs" v-for="(item) in impressionOptions" :key="item.name">
						<!-- 未选中 -->
						<view v-if="!item.choosed" class='cu-tag line-green' @tap="itemClick(item)">{{item.name}}</view>
						<!-- 选中状态 -->
						<view v-if="item.choosed" class='cu-tag bg-green' @tap="itemClick(item)">{{item.name}}</view>
					</view>
				</view>

				<view class="cu-form-group flex-direction  align-start">
					<view class="title">最美好的回忆</view>
					<textarea maxlength="-1" @input="textareaMemoryInput" placeholder="随便写写..."></textarea>
				</view>
				<view class="cu-form-group  flex-direction  align-start">
					<view class="title">最疯狂的经历</view>
					<textarea maxlength="-1" @input="textareaExperienceInput" placeholder="随便写写..."></textarea>
				</view>
				<view class="cu-form-group  flex-direction   align-start">
					<view class="title">最猥琐的一面</view>
					<textarea maxlength="-1" @input="textareaBadInput" placeholder="随便写写..."></textarea>
				</view>
				<view class="cu-form-group  flex-direction   align-start">
					<view class="title">你想对我说的话</view>
					<textarea maxlength="-1" @input="textareaTalkInput" placeholder="随便写写..."></textarea>
				</view>
				<view class="cu-bar bg-white margin-top">
					<view class="action">
						附上你美美（帅帅）哒的照片吧
					</view>
					<view class="action">
						{{imgList.length}}/4
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
							<image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</form>

			<div class="flex justify-center" style="width:100%">
				<button class="cu-btn round bg-primary margin-xl" style="background-color: #F06292;" type="primary" @click="submit">
					<text style="margin-left: 100rpx; margin-right: 100rpx;">写完了</text>
				</button>
			</div>

		</view>

	</view>

</template>

<script>
	import helper from '../../../common/helper.js';
	import Bus from '../../../common/bus.vue';
	export default {
		data() {
			return {

				userInfo: {},
				myBookInfo: {},
				writeBookId: '',
				writeBookInfo: {},
				empty: false,
				menuArrow: true,
				impressionDatas: [
					"文艺", "范二", "帅哥", "拉风", "软妹子",
					"女汉子", "手机控", "起床困难户", "购物狂",
					"技术宅", "待解救", "小清新", "月光族", "知识分子",
					"靠谱", "游戏控"
				],
				impressionOptions: [
					// {
					// 	name: "文艺",
					// 	choosed: false
					// }
				],
				impressionOptionsChooses: [
					"知识分子", "购物狂"
				],
				gridCol: 3,
				gridBorder: true,
				menuBorder: false,
				menuCard: true,
				imgList: [],
				myBirthday: '2018-12-25',
				bestMemory: "",
				bestExperience: "",
				bestBad: "",
				talk2me: "",
				myName: "",
				myDream: "",
				myPhone: "",
				answerVOMap: {
					// myName:"myName",
					// myDream:"myDream",
					// myPhone:"myPhone",
					// myBirthdaty:"myBirthdaty",
					// bestMemory:"bestMemory",
					// bestExperience:"bestExperience",
					// bestBad:"bestBad",
					// talk2me:"talk2me",
					// impressionOptionsChooses:"impressionOptionsChooses",
					// impressionDatas:"impressionDatas",
					// imageList:"imageList",

				},


				tmpUserInfo: {
					"userId": 6,
					"platform": "qq-ytxl",
					"username": null,
					"mobile": null,
					"password": null,
					"createTime": "2019-06-20 18:13:24",
					"wxMiniOpenId": "og_b848KEDK3ZXQuXMR4bxAMoLuM",
					"nickName": "小白",
					"userStatus": null,
					"avatar": "https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTL0icjOn8ic1rbUoIbXCry72G05MXicMnPXsE2ZWP6ubLM36KSESHyZgrB1DZBXFzTpr2HUheUG7KdZQ/132",
					"sex": null,
					"weight": 1,
					"avrgMenstruationDuration": null,
					"avraMenstruationInterval": null,
					"smsAlert": null,
					"emailAlert": null,
					"alertFrontDays": null,
					"alertTime": "2020-03-02 17:41:56.0",
					"email": null
				}

			}
		},




		onLoad: function(option) {

			let that = this;
			// todo 测试数据
			uni.setStorage({
				key: 'userInfo',
				data: this.tmpUserInfo,
				success: function() {
					console.log('save userInfo success');
				}
			});
			this.changeOptions();

			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					console.log('index getStorage', res);
					if (res.errMsg === 'getStorage:ok' && res.data != null && res.data != '') {
						that.userInfo = res.data;
						if (that.userInfo != null && that.userInfo.userId != null) {
							//that.getBookInfoByUserId(userInfo.userId);
						}
					} else {
						// that.showModal();
						// that.hasUserInfo = false;
					}

				},
				fail: function() {
					console.log('getStorage fail');
					// that.showModal();
					// that.hasUserInfo = false;
				}
			});

			console.log(option.from)

			//区分是从哪来的
			this.pageFrom = option.from;
			if (this.pageFrom === 'toWrite') {
				this.writeBookInfo = getApp().globalData.writeBookInfo;
				console.log(this.writeBookInfo)
			}

			// if (that.writeBookId != null && that.writeBookId != '') {
			// 	that.getBookInfo(that.writeBookId, 'writeBookInfo');
			// }


		},

		onShow: function() {
			console.log('index onShow');
			let that = this;
			// 查看是否授权
			// storeConfig.removeStore('token')
			// let token = storeConfig.getStore('token')
			// uni.getStorage({
			// 	key: 'recordList',
			// 	success: function(res) {
			// 		console.log('index getStorage', res);
			// 		if (res.errMsg === 'getStorage:ok' && res.data != null && res.data != '') {
			// 		} else {
			// 			// that.showModal();
			// 			// that.hasUserInfo = false;
			// 		}

			// 	},
			// 	fail: function() {
			// 		console.log('getStorage fail');
			// 		// that.showModal();
			// 		// that.hasUserInfo = false;
			// 	}
			// });

		},
		methods: {
			saveClick: function() {
				//保存


			},
			addItem: function() {
				this.todo.push({
					id: Math.floor(Math.random() * 9999) + 10,
					label: this.newitem,
					done: false
				});
				this.newitem = '';
			},

			ChooseImage() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},

			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},

			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这张图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},

			DateChange(e) {
				this.myBirthday = e.detail.value
			},

			changeOptions() {
				let that = this;
				that.impressionOptions = that.impressionDatas.map((item, index, arr) => {
					let json = {}
					json.name = item;

					let i = that.impressionOptionsChooses.indexOf(item)
					if (i != -1) {
						json.choosed = true;
					} else {
						json.choosed = false;
					}
					return json;
				});


			},

			/**
			 * item 点击事件
			 * @param {Object} e
			 */
			itemClick(e) {
				let that = this;
				//console.log("itemClick", e);

				let i = that.impressionOptionsChooses.indexOf(e.name)
				if (i != -1) {
					//存在
					that.impressionOptionsChooses.splice(i, 1);
				} else {
					that.impressionOptionsChooses.push(e.name);
				}
				that.changeOptions();
			},

			/**
			 * 添加记录
			 */
			addRecord(e) {

				//在起始页面跳转到test.vue页面并传递参数
				// uni.navigateTo({
				// 	// url: '../my/ym-detail/ym-detail?from=addRcord'
				// 	url: './add/add?from=' + e
				// });
			},

			textareaMemoryInput(e) {
				this.bestMemory = e.detail.value
			},

			textareaExperienceInput(e) {
				this.bestExperience = e.detail.value
			},


			textareaBadInput(e) {
				this.bestBad = e.detail.value
			},


			textareaTalkInput(e) {
				this.talk2me = e.detail.value
			},

			setFormData() {

				let that = this;
				let answerItemVOMap = {};
				answerItemVOMap.myName = that.myName;
				answerItemVOMap.myDream = that.myDream;
				answerItemVOMap.myPhone = that.myPhone;
				answerItemVOMap.myBirthdaty = that.myBirthday;
				answerItemVOMap.bestMemory = that.bestMemory;
				answerItemVOMap.bestExperience = that.bestExperience;
				answerItemVOMap.bestBad = that.bestBad;
				answerItemVOMap.talk2me = that.talk2me;
				answerItemVOMap.impressionOptionsChooses = that.impressionOptionsChooses;
				answerItemVOMap.impressionDatas = that.impressionDatas;
				answerItemVOMap.imageList = that.imageList;

				that.answerVOMap = answerItemVOMap;

			},


			/**
			 * 获取book信息
			 */
			// getBookInfo(bookId, changval) {

			// 	let that = this;


			// 	let playod = {

			// 	};

			// 	uni.showLoading({
			// 		title: "加载中"
			// 	});
			// 	uni.request({
			// 		url: helper.api + '/appTxlBookAndAnswer/open/getBookInfoByBookId?bookId=' + bookId,
			// 		method: 'get',
			// 		data: playod,
			// 		header: {
			// 			'Content-Type': 'application/json' //自定义请求头信息
			// 		},

			// 		success: (res) => {
			// 			console.log(res.data);
			// 			uni.hideLoading();
			// 			if (res.data.code === 0) {
			// 				that.$data[changval] = res.data.data;

			// 				// todo 刷新数据
			// 			} else {
			// 				uni.showModal({
			// 					title: '请求失败！',
			// 					content: '错误原因:' + res.data.msg,
			// 					showCancel: false
			// 				});
			// 				return;
			// 			}
			// 		},
			// 		fail: (err) => {
			// 			uni.hideLoading();
			// 			uni.showModal({
			// 				title: '请求失败！',
			// 				content: '错误原因:' + err,
			// 				showCancel: false
			// 			});
			// 		}
			// 	});

			// },
			/**
			 * 获取book信息
			 */
			// getBookInfoByUserId(userId) {

			// 	let that = this;


			// 	let playod = {

			// 	};

			// 	uni.showLoading({
			// 		title: "加载中"
			// 	});
			// 	uni.request({
			// 		url: helper.api + '/appTxlBookAndAnswer/open/getBookInfoByUserId?userId=' + userId,
			// 		method: 'get',
			// 		data: playod,
			// 		header: {
			// 			'Content-Type': 'application/json' //自定义请求头信息
			// 		},

			// 		success: (res) => {
			// 			console.log(res.data);
			// 			uni.hideLoading();
			// 			if (res.data.code === 0) {
			// 				that.myBookInfo = res.data.data;

			// 				// todo 刷新数据
			// 			} else {
			// 				uni.showModal({
			// 					title: '请求失败！',
			// 					content: '错误原因:' + res.data.msg,
			// 					showCancel: false
			// 				});
			// 				return;
			// 			}
			// 		},
			// 		fail: (err) => {
			// 			uni.hideLoading();
			// 			uni.showModal({
			// 				title: '请求失败！',
			// 				content: '错误原因:' + err,
			// 				showCancel: false
			// 			});
			// 		}
			// 	});

			// },



			/**
			 * 提交
			 */
			submit() {

				let that = this;

				that.setFormData();

				let playod = {
					bookId: that.writeBookInfo.id,
					bookName: that.writeBookInfo.name,
					answerUserId: that.userInfo.userId,
					answerUserName: that.userInfo.nickName,
					type: 'open',
					answerVO: that.answerVOMap,
				};

				uni.showLoading({
					title: "加载中"
				});
				uni.request({
					url: helper.api + '/appTxlBookAndAnswer/open/addOrUpdateAnswer', //仅为示例，并非真实接口地址。
					method: 'post',
					data: playod,
					header: {
						'Content-Type': 'application/json' //自定义请求头信息
					},

					success: (res) => {
						console.log(res.data);
						uni.hideLoading();
						if (res.data.code === 0) {

							// todo 刷新数据
							uni.showModal({
								title: '保存成功',
								content: '你的朋友已经可以看到你的留言啦！',
								showCancel: false
							});
						} else {
							uni.showModal({
								title: '请求失败！',
								content: '错误原因:' + res.data.msg,
								showCancel: false
							});
							return;
						}
					},
					fail: (err) => {
						uni.hideLoading();
						uni.showModal({
							title: '请求失败！',
							content: '错误原因:' + err,
							showCancel: false
						});
					}
				});

			}




		},
		computed: {

		}
	}
	// var todolist1 = new Vue({

	// });
</script>

<style>
	/*背景模糊*/
	.bg {
		width: 100%;
		height: 100vh;
		/* position: relative; */
		/* background: url("../../static/img/bg_20200120164709.png") no-repeat fixed; */
		background-image: linear-gradient(45deg, pink, skyblue);
		padding: 1px;
		/* box-sizing: border-box;
		z-index: 1; */
	}

	.bg:after {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background: inherit;
		filter: blur(2px);
		z-index: 2;
	}

	.drag {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		/*  width:200px;
	    height:200px; */
		text-align: center;
		color: white;

		z-index: 11;
	}

	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.radio-parent {
		flex-wrap: wrap;
	}
</style>
